import React, { useMemo } from "react";
import { NumberField, Form, DataSet } from "choerodon-ui/pro";
import inputDS from './inputDataSet';
import 'choerodon-ui/pro/lib/field/style/index.css';

const FormatterNumber: React.FC = (): React.ReactElement => {
  const inputDataSet = useMemo(() => new DataSet(inputDS()), []);
  return (
    <div>
      <Form dataSet={inputDataSet} style={{ width: '4.5rem' }}>
        <NumberField
          name="formNumber1"
          defaultValue={1000}
          step={1}
          renderer={({ text }) => `$ ${text}`.replace(/\B(?=(\d{3})+(?!\d))/g, ",")}
        />
      </Form>
    </div>
  );
};

export default FormatterNumber;